<template>
	<svg aria-hidden="true" :style="{ width, height }">
		<use :xlink:href="`${prefix}${iconName}`" :fill="color" />
	</svg>
</template>

<script lang="ts">
	export default {
		name: 'SvgIcon',
	}
</script>

<script setup lang="ts">
	defineProps({
		// 前缀
		prefix: {
			type: String,
			default: '#icon-',
		},
		// 图标名称
		iconName: {
			type: String,
			required: true,
		},
		// 图标颜色
		color: {
			type: String,
			default: '#333',
		},
		// 宽度
		width: {
			type: String,
			default: '16px',
		},
		// 高度
		height: {
			type: String,
			default: '16px',
		},
	})
</script>

<style scoped></style>
